<template>
	<view>
		<view class="setup">
			<view class="d-b-c setup_item">
				<view class="">头像</view>
				<view class="d-s-c">
					<view class="mr20">
						<template>
							<image src="/static/avatar.png" mode="" class="photo" @click="chooseAvatar" v-if="avatar.includes('data:image')"></image>
							<image :src="`${imgUrl}${avatar}`" mode="" class="photo" @click="chooseAvatar" v-else></image>
						</template>
					</view>
				</view>
			</view>
			<view class="d-b-c setup_item">
				<view class="">手机号</view>
				<view class="d-s-c">
					<view class="mr20">
						<template>
							<u-input v-model="mobile" type="number" :border="false" placeholder="请输入手机号" inputAlign="right" disabled />
						</template>
					</view>
				</view>
			</view>
			<view class="d-b-c setup_item">
				<view class="">姓名</view>
				<view class="d-s-c">
					<view class="mr20">
						<template>
							<u-input v-model="nickname" type="text" :clearable="false" :border="false" placeholder="请输入姓名" inputAlign="right" @blur="editNickname" />
						</template>
					</view>
				</view>
			</view>
			<view class="d-b-c setup_item">
				<view class="">年级</view>
				<view class="d-s-c">
					<view class="mr20" @click="gradeShow = true">{{ grade > 0 ? gradeName : '请选择年级' }}</view>
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view>
			</view>
			<view class="d-b-c setup_item">
				<view class="">学校</view>
				<view class="d-s-c">
					<view class="mr20">
						<template>
							<u-input v-model="school" type="text" :clearable="false" :border="false" placeholder="请输入学校" inputAlign="right" @blur="editSchool" />
						</template>
					</view>
				</view>
			</view>
			<view class="d-b-c setup_item">
				<view class="">地区</view>
				<view class="d-s-c" @click="regionShow = true">
					<view class="mr20">{{ region ? region : '请选择地区' }}</view>
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view>
			</view>
		</view>
		<!-- 年级选择器 -->
		<template>
			<u-select v-model="gradeShow" mode="single-column" :list="gradeList" @confirm="gradeConfirm"></u-select>
		</template>
		<!-- 地区选择器 -->
		<template>
			<u-picker mode="region" v-model="regionShow" :default-region="defaultRegion" @confirm="regionConfirm"></u-picker>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uploadUrl: getApp().globalData.uploadUrl,
				imgUrl: getApp().globalData.imgUrl,
				avatar: '',
				mobile: '', //手机号的值
				nickname: '', //姓名的值
				grade: 0,
				gradeName: '',
				gradeShow: false,
				gradeList: [
					{value: 1, label: '一年级'},
					{value: 2, label: '二年级'},
					{value: 3, label: '三年级'},
					{value: 4, label: '四年级'},
					{value: 5, label: '五年级'},
					{value: 6, label: '六年级'},
					{value: 7, label: '初一'},
					{value: 8, label: '初二'},
					{value: 9, label: '初三'},
					{value: 10, label: '高一'},
					{value: 11, label: '高二'},
					{value: 12, label: '高三'},
				],
				school: '',
				region: '',
				defaultRegion: [],
				regionShow: false, //地区选择
			}
		},
		onLoad() {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 1500)
				return false
			} else {
				const userInfo = uni.getStorageSync('userInfo')
				this.avatar = userInfo.avatar
				this.mobile = userInfo.mobile
				this.nickname = userInfo.nickname
				this.grade = userInfo.grade
				if (userInfo.grade > 0) {
					this.gradeName = this.gradeList[userInfo.grade - 1].label
				}
				this.school = userInfo.school
				this.region = userInfo.region
				if (userInfo.region) {
					this.defaultRegion = userInfo.region.split('-')
				}
			}
		},
		methods: {
			// 修改个人信息
			editProfile(avatar, nickname, grade, school, region) {
				let json = {
					avatar: avatar,
					nickname: nickname,
					grade: grade,
					school: school,
					region: region,
				}
				uni.showLoading({
					title: '正在修改...'
				})
				this.$u.post(this.$u.api.profile, json).then((res) => {
					uni.hideLoading()
					uni.$u.toast('修改成功')
				}).catch((err) => {
					uni.hideLoading()
					console.log(err)
					uni.$u.toast(err.data.msg)
				})
			},
			// 上传头像
			chooseAvatar() {
				uni.showLoading({
					title: '正在上传...'
				})
				this.utils.uploadImage({
					count: 1, // 上传图片张数
					url: this.uploadUrl, // 上传地址
					name: 'file', // 这里根据后端需要的字段来定义
					formData: {
						// 附带的表单数据
						token: this.$store.state.token
					}
				}).then((res) => {
					uni.hideLoading()
					console.log('图片上传成功', res)
					this.editProfile(res[0], '', '', '', '')
					this.avatar = res[0]
					const userInfo = uni.getStorageSync('userInfo')
					userInfo.avatar = res[0]
					uni.setStorageSync('userInfo', userInfo)
				}).catch((err) => {
					uni.hideLoading()
					console.error('图片上传失败', err)
					uni.$u.toast('上传失败')
				});
			},
			// 修改姓名
			editNickname() {
				if (this.nickname == '') {
					uni.$u.toast('请输入姓名')
					return false
				}
				this.editProfile('', this.nickname, '', '', '')
				const userInfo = uni.getStorageSync('userInfo')
				userInfo.nickname = this.nickname
				uni.setStorageSync('userInfo', userInfo)
			},
			// 年级选择确认
			gradeConfirm(e) {
				this.grade = e[0].value
				this.gradeName = e[0].label
				if (this.gradeName == '') {
					uni.$u.toast('请选择年级')
					return false
				}
				this.editProfile('', '', this.grade, '', '')
				const userInfo = uni.getStorageSync('userInfo')
				userInfo.grade = this.grade
				uni.setStorageSync('userInfo', userInfo)
			},
			// 修改学校
			editSchool() {
				if (this.school == '') {
					uni.$u.toast('请输入学校')
					return false
				}
				this.editProfile('', '', '', this.school, '')
				const userInfo = uni.getStorageSync('userInfo')
				userInfo.school = this.school
				uni.setStorageSync('userInfo', userInfo)
			},
			// 地区选择确认
			regionConfirm(e) {
				let region = e.province.label + '-' + e.city.label + '-' + e.area.label
				this.region = region
				this.defaultRegion = region.split('-')
				if (this.region == '') {
					uni.$u.toast('请选择地区')
					return false
				}
				this.editProfile('', '', '', '', this.region)
				const userInfo = uni.getStorageSync('userInfo')
				userInfo.region = this.region
				uni.setStorageSync('userInfo', userInfo)
			}
		}
	}
</script>

<style>
	.setup{
		margin: 30rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}
	.setup_item{
		padding: 30rpx 30rpx;
		height: 120rpx;
		line-height: 120rpx;
	}
	.photo {
		display: block;
		width: 90rpx;
		height: 90rpx;
		border-radius: 100%;
	}
</style>
